<template>
    <!-- item.status == 0 已使用或者已过期 -->
    <!-- item.status == 1 待使用 -->
    <view class="ticketItem">
        <view class="ticket_part" v-for="(item,index) in ticket" :key="index" :class="item.status == 0 || item.status == 1 ? 'box_shadow' : ''">
            <view class="ticket_info" :class="item.status == 0 ? 'change_bg' :  item.status == 1 ? 'border_radius': ''">
                <view class="left">
                    <p>{{ item.text }}</p>
                    <view class="integral">
                        <span class="span_left">{{ item.num }}</span>
                        <span class="span_middle">积分</span>
                        <span class="span_right">{{ item.num1 }}</span>
                    </view>
                </view>
                <view class="right">
                    <view class="button" @click="toPage(item.url,item.text1)" v-if="item.button_status == 0">兑换</view>
                    <view class="button" @click="toPage(item.url,item.text1)" v-if="item.button_status == 1">使用</view>
                    <p>已兑{{ item.num2 }}人</p>
                </view>
            </view>
            <view class="ticket_bottom" v-if="item.status == 0 || item.status == 1">
                <p v-if="item.status == 0">{{ item.text1 }}</p>
                <p v-if="item.status == 1">{{ item.start_time }}至{{ item.end_time }}</p>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        ticket: {
            type: Array,
            default: [],
        },
    },
    components: {},
    data() {
        return {};
    },
    computed: {},
    methods: {
		toPage(val,text) {
			this.$emit('jump',val,text)
		}
	},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>
<style scoped lang='scss'>
@import "./index.scss";
.box_shadow {
    box-shadow: 4rpx 8rpx 24rpx 0px rgba(0, 0, 0, 0.08) !important;
}
.change_bg {
    border-radius: 16rpx 16rpx 0 0 !important;
    background-image: none !important;
    background-color: #bbb;
    .right {
        .button {
            color: #999 !important;
        }
    }
}
.border_radius{
    border-radius: 16rpx 16rpx 0 0 !important;
}
</style>